<template>
  <div class="homes">
    <van-nav-bar title="网格选择" left-arrow @click-left="onClickLeft">
      <template #right>
        <div class="nav-right" @click="sureClick">确认</div>
      </template>
    </van-nav-bar>
    <div class="contents">
      <div class="header">
        <div class="title1">
          已选信息
        </div>
        <div class="select" v-for="(item, index) in selects" :key="index" @click="removeItem(index)">
          <div class="left-select">
            <div class="select-area">{{ item.regionName }}</div>
          </div>
          <van-icon name="arrow" size="10"/>
        </div>
      </div>
      <div class="list">
        <div class="list-item" @click="itemClick(item)" v-for="(item, index) in listData" :key="index">
          <div class="area">{{ item.regionName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/api/index"
import {ref, reactive, toRefs, onMounted} from "vue"
import {useRoute,useRouter} from "vue-router"
import store from "@/store/index"
import GetNetUtil from "../../../utils/GetNetUtil";
export default {
  setup() {
    let state = reactive({
      listData: [],
      selects: [],
      routeName:'',
      showDate:'',
      title:'',
      id:0
    })
    const router = useRouter();
    //获取上级页面传过来的值
    function getParams() {
      let regionId = sessionStorage.getItem("regionId");
      let selects = sessionStorage.getItem("selects");
      console.log("地市选择页面接收参数：",selects)
      let array = JSON.parse(selects);
      state.selects = array;
      state.routeName = sessionStorage.getItem("routeName");
      state.showDate = sessionStorage.getItem("showDate");
      state.title = sessionStorage.getItem("title");
      state.id = sessionStorage.getItem("id");
      getGridList(regionId);
    }

    onMounted(() => {
      getParams();
    })

    // const onClickLeft = () =>  sureClick();

    function onClickLeft(){
      sureClick();
    }

    //确认按钮
    function sureClick() {
      let size = state.selects.length;
      let region = state.selects[size -1];
      sessionStorage.setItem("regionId",region.regionId);
      sessionStorage.setItem("regionName",region.regionName);
      sessionStorage.setItem("showDate",state.showDate);
      sessionStorage.setItem("selects",JSON.stringify(state.selects));
      sessionStorage.setItem("title",state.title);
      sessionStorage.setItem("id",state.id);
      //用户需要修改的代码
      router.push({name: state.routeName});
    }


    //下一级
    function itemClick(item) {
      let obj = {regionId:item.regionId,regionName:item.regionName};
      console.log("下一级",obj);
      state.selects.push(obj);
      getGridList(item.regionId);
    }

    //上一级
    function removeItem(index) {
      if (index == 0) {
        return;
      }
      let selects = state.selects;
      let temp = selects.slice(0, index);
      state.selects = temp;
      //根据选中的最后一个值加载
      let regionId = state.selects[temp.length -1].regionId;
      getGridList(regionId);
    }

    //根据父类id 查询所有网格
    function getGridList(parentId){
      let statMonth = state.showDate;
      GetNetUtil.requestPost("/serviceManager/getGridList", "", {regionId: parentId,statMonth:statMonth.replace("-","")}, getGridList)
      async function getGridList(resp) {
        state.listData = [];
        if (resp.resultCode === "200") {
          state.listData = resp.data;
        }
      }
    }
    return {
      ...toRefs(state),
      onClickLeft,
      sureClick,
      itemClick,
      removeItem
    }
  },
}
</script>

<style lang="scss" scoped>
.homes {
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;

  .nav-right {
    font-size: 14px;
    color: #3db4f8;
  }

  .contents {
    // margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    width: 100%;
    height: calc(100% - 44px);
    overflow-y: auto;

    .header {
      width: 100%;
      border-bottom: 10px solid #f5f5f5;

      .title1 {
        display: flex;
        font-size: 14px;
        background-color: #f5f5f5;
        width: 100%;
        height: 40px;
        padding-left: 20px;
        align-items: center;
      }

      .select {
        width: 100%;
        padding-right: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 10px;
        border-bottom: 1px solid #f5f5f5;

        .left-select {
          height: 54px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 10px;

          .select-title {
            margin: 5px;
            color: red;
          }

          .select-area {
            margin: 5px;
            font-size:14px;
          }

        }

      }
    }

    .list {
      width: 100%;

      .list-item {
        display: flex;
        justify-content: space-between;
        height: 44px;
        align-items: center;
        font-size: 14px;
        border-bottom: 1px solid #f5f5f5;

        .area {
          margin-left: 10px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          white-space: pre-wrap;
        }
      }
    }
  }
}

</style>